import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

interface KLineChartProps {
  style: React.CSSProperties;
  title: string;
  data: number[][]; // 修改为适应K线图的数据格式
  xdata: string[]; // 修改此处，设置为字符串数组类型
}

const KLineChart: React.FC<KLineChartProps> = ({ style, title, data, xdata }: KLineChartProps) => {
  const domRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chartInit();
  }, []);

  const chartInit = () => {
    if (domRef.current) {
      const myChart = echarts.init(domRef.current);

      myChart.setOption({
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xdata
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick', // 使用K线图类型
            data: data,
            itemStyle: {
              color: '#c23531', // 上涨 candle 的颜色
              color0: '#314656', // 下跌 candle 的颜色
              borderColor: '#c23531', // 上涨 candle 的边框颜色
              borderColor0: '#314656' // 下跌 candle 的边框颜色
            }
          }
        ]
      });
    }
  };

  return (
    <div>
      <div ref={domRef} style={style}></div>
    </div>
  );
};

export default KLineChart;
